<template>
  <div class="service-cards-container">
    <div v-for="(item, index) in serviceList" :key="index" class="service-card">
      <!-- 这里可以根据实际情况替换图标，比如使用 <img> 或者图标组件 -->
      <div
        class="card-icon"
        :style="{
          backgroundColor: item.iconBgColor,
        }"
      >
        <img :src="item.iconUrl" />
      </div>
      <div class="card-title">{{ item.title }}</div>
      <div class="card-desc">{{ item.desc }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, onBeforeUnmount, onUnmounted } from 'vue';

const serviceList = ref([
  {
    title: '鼎助云息壤一体化智算服务平台',
    desc: '鼎助云统一的智算品牌和产品能力',
    iconBgColor: '#6949F2',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/26b13423342744478072a0203ec59332',
  },
  {
    title: '科研助手',
    desc: '面向高校科研场景的一站式科研实训平台',
    iconBgColor: '#4285F4',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/8b526590608f4b18bec8196bd37c8e9c',
  },
  {
    title: '算力互联调度平台',
    desc: '让算力像水电一样随用随取',
    iconBgColor: '#4285F4',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/b86331f34ecc4f13a24dc4c3bf25f57f',
  },
  {
    title: '一站式智算服务平台',
    desc: '大模型“训推用”全栈工具链智算服务平台',
    iconBgColor: '#4285F4',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/9000f1347c614a66862d62ae184dab81',
  },
  {
    title: '智算一体机',
    desc: '极具性价比、软硬一体的智算产品',
    iconBgColor: '#4285F4',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/f5f3dc0e1c484f66bd63ea526006539f',
  },
  {
    title: '人脸检测',
    desc: '对自然场景下的人脸进行检测，返回坐标',
    iconBgColor: '#F44336',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/8b5132c15c644153a2a960e510953d24',
  },
  {
    title: '人脸实名认证',
    desc: '姓名+身份证号+人脸图像三要素实人身份验真',
    iconBgColor: '#F44336',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/c3c57258c6c943fa806a21c326b6a858',
  },
  {
    title: '人脸属性识别',
    desc: '准确识别人脸年龄、性别属性信息',
    iconBgColor: '#2196F3',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/5ddbe0e9b1d84053b1f60c8d797bddfb',
  },
  {
    title: '是否戴口罩识别',
    desc: '在人脸检测的基础上分析是否佩戴口罩',
    iconBgColor: '#4CAF50',
    iconUrl:
      'https://ctyun-portal.gdoss.xstore.ctyun.cn/product/c92180dcfef44fcea281099ea30311e3',
  },
]);
</script>

<style scoped lang="scss">
.service-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距 */
  // padding: 20px;
  width: 100%;
}

.service-card {
  width: calc(33.333% - 20px); /* 每行放 3 个，根据需求调整 */
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;

  img {
    width: 50px;
    height: 50px;
  }
}

.icon-placeholder {
  /* 只是简单占位，实际可替换成更美观的图标呈现方式 */
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 14px;
  color: #666;
}

/* 响应式适配，屏幕较小时调整每行显示数量 */
@media (max-width: 992px) {
  .service-card {
    width: calc(50% - 20px);
  }
}

@media (max-width: 576px) {
  .service-card {
    width: 100%;
  }
}
</style>
